// 导入重置样式
require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/basic.css");
// 引入矢量图
require("../../assets/fonts/iconfont.css");
// swiper轮播图
require("../../libs/swiper/swiper-bundle.min.css");
const { default: axios } = require("axios");
const Swiper = require("../../libs/swiper/swiper-bundle.min.js");
// 引入底部导航tabbar
require("../../assets/css/tabbar.less");
// 引入当前页面的样式
require('./index.less');

// 引入dom
const dom = require("../../utils/dom.js");
// 引入axios模块
// const axios = require("axios");
// 引入底部导航tabbar
const tabbar = require("../../utils/tabbar.js");

window.addEventListener("DOMContentLoaded",()=>{
    // 渲染底部导航
    tabbar.tabbar("index");

    // 轮播图
    var mySwiper = new Swiper ('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        
        // autoplay:true,//等同于以下设置
        autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
    })        

    // 发请求获取用户个人信息
    axios.defaults.baseURL = 'http://fitness.h5.itsource.cn:3701';
    let token = localStorage.getItem("token");  //获取token数据
    axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
    axios.get("/api/user/info").then(response => {
        // 渲染排名
        dom.get("#ranking").textContent = response.data.data.ranking;
    
        // 渲染徽章
        dom.get("#badges").textContent = response.data.data.badges;
    })

    function renderClock(){
        // 发请求获取用户打卡信息
        axios.get("/api/user/clockInInfo").then(response => {
            // 渲染打卡天数
            dom.get("#day").textContent = response.data.data.clockCount;
    
            let clockIn = dom.get("#clockIn");
            if(response.data.data.isClockIn){
                // 已打卡  按钮禁用
                clockIn.disabled = true;
                clockIn.style.backgroundColor = "#def2fc";
                clockIn.textContent = "已打卡";
            }else{
                // 未打卡  按钮不禁用
                clockIn.disabled = false;
            }
        })
    }
    renderClock();  //刷新页面时执行一次函数

    // 点击按钮获取打卡事件
    dom.get("#clockIn").addEventListener("click", () => {
        // 发请求获取打卡事件
        axios.post("/api/user/clockIn").then(response => {
            console.log(response)
            if(response.data.errno === 0){
                alert("打卡成功");
                renderClock();  //点击按钮时执行一次函数
            }
        })
    })
})